<template>
  <div class="box">
    <NavBar @goBack="goBack" :title="title"></NavBar>
    <div class="register">
      <h1>Register</h1>

      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" label placeholder="Please input mobile phone or E-mail" />

      <!-- 输入密码 -->
      <van-field
        v-if="isOpen"
        v-model="password"
        type="text"
        label
        placeholder="Please input password"
        :right-icon="passwordIcon"
        @click-right-icon="switchs"
      />
      <van-field
        v-if="!isOpen"
        v-model="password"
        type="password"
        label
        placeholder="Please input password"
        :right-icon="passwordCloseIcon"
        @click-right-icon="switchs"
      />

      <van-field
        v-if="confirmIsOpen"
        v-model="confirmPassword"
        type="text"
        label
        placeholder="Please confirm password"
        :right-icon="passwordIcon"
        @click-right-icon="confirmSwitchs"
      />
      <van-field
        v-if="!confirmIsOpen"
        v-model="confirmPassword"
        type="password"
        label
        placeholder="Please confirm password"
        :right-icon="passwordCloseIcon"
        @click-right-icon="confirmSwitchs"
      />

      <div class="code">
        <div>
          <van-field v-model="code" type="password" placeholder="Verification Code" />
        </div>
        <div>
          <van-button type="primary" block @click="getCode">
            <van-count-down
              v-if="isCode"
              ref="countDown"
              millisecond
              :time="60000"
              :auto-start="false"
              format="Reacquire( ss s )"
              @finish="finish"
            />
            <span v-if="!isCode">Get a verification code</span>
          </van-button>
        </div>
      </div>
      <van-button v-if="buttonType" type="info" size="large" @click="register">Register</van-button>
      <van-button v-if="!buttonType" type="primary" size="large" @click="register">Register</van-button>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import { Register, validata, qualified } from '@/model/registerInstance'
import { sendSms, toRegister } from 'api/user'
import { Toast } from 'vant'

export default {
  name: 'register',
  components: {
    NavBar
  },
  data() {
    return {
      passwordCloseIcon: require('assets/image/icon_no_eye.png'),
      passwordIcon: require('assets/image/icon_eye.png'),
      isOpen: false,
      confirmIsOpen: false,
      buttonType: false,
      isCode: false,
      isTime: true,
      timer: {},
      second: 60,
      title: '',
      tel: '',
      password: '',
      confirmPassword: '',
      code: ''
    }
  },
  watch: {
    tel: function(newValue, oldValue) {
      this.tel = newValue.replace(/[^0-9]/g, '')
    },
    password: function(newValue, oldValue) {
      this.password = newValue.replace(/\s+/g, '')
      this.buttonType = true
    },
    confirmPassword: function(newValue, oldValue) {
      this.confirmPassword = newValue.replace(/\s+/g, '')
      this.buttonType = true
    }
  },
  mounted() {},

  methods: {
    goBack() {
      this.$router.replace({
        path: '/login'
      })
    },
    finish() {
      this.isCode = false
      //   console.log('完成')
    },
    register() {
      //   alert('注册')
      const register = new Register(this.tel, this.password, this.confirmPassword, this.code)
      if (validata(register, Register)) {
        let data = register._getData()
        // console.log(data)
        toRegister(data)
          .then(res => {
            // console.log(res)
            this.$router.replace({
              path: '/login'
            })
            Toast.success({
              message: res.message
            })
          })
          .catch(err => {
            // console.log(err)
            Toast.fail({
              message: err
            })
          })
      }
    },

    switchs() {
      //   alert('55')
      this.isOpen = !this.isOpen
    },
    confirmSwitchs() {
      this.confirmIsOpen = !this.confirmIsOpen
    },
    getCode() {
      //   alert('55')
      //   Toast.success({
      //     message: 'OK'
      //   })
      //   Toast.fail({
      //     message: 'netWork Err'
      //   })

      if (qualified(this.tel)) {
        const data = {
          phone: this.tel,
          userType: 'consumer'
        }
        sendSms(data)
          .then(res => {
            // console.log(res)
            this.isCode = true

            //是否过了60s 或 第一次
            if (this.isTime) {
              this.isTime = false
              let second = this.second
              const timer = setInterval(() => {
                second--
                this.second = second
                if (second) {
                  // console.log(second)
                  //donothing
                } else {
                  this.isTime = true
                  clearInterval(timer)
                }
              }, 1000)

              setTimeout(() => {
                this.$refs.countDown.start()
                // console.log('请求')
              }, 20)
            }
          })
          .catch(err => {
            Toast.fail({
              message: err
            })
            // console.log('err', err)
          })
      } else {
        Toast.fail({
          message: '账号为空'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'assets/css/register/register.scss';
</style>
